<style lang="sass">
.groupItem
  padding: 10px 20px
  border-bottom: 1px solid #f8f8f8
  .groupTag
    display: flex
    margin-top: 5px
    .tagItem
      height: 34px
      background-color: #beafa2
      margin-right: 10px
      display: flex
      align-items: center
      padding: 4px 12px
      border-radius: 6px
      font-size: 24px
      color: #fff
  .groupInfo
    display: flex
    justify-content: space-between
    align-items: center
    margin-bottom: 10px
    .groupTilte
      font-size: 32px
    .groupDetail
      color: #ccc
      font-size: 28px
      display: flex
      align-items: center
  .imgDetail
    width: 100%
    box-sizing: border-box
    display: grid
    grid-template-columns: repeat(5, 1fr)
    gap: 20px
    position: relative
    .num
      position: absolute
      right: 0px
      top: 0px
      height: 30px
      font-size: 22px
      background-color: rgba(0, 0, 0, 0.67)
      display: flex
      padding: 0 8px
      align-items: center
      color: #fff
      border-radius: 0 0 0 5px
    .imgBox
      aspect-ratio: 1
    .imgItem
      border-radius: 5px
      width: 100%
      height: 100%
</style>
<template>
  <view  class="groupItem" :key="item.id" @tap="goGroup(item.id)">
    <view class="groupInfo">
      <view class="groupTilte"> {{ item.title }} </view>
      <view class="groupDetail">
        查看详情
        <Image class="arrow" style="width: 10px; height: 10px; margin-left: 5px;" :src="arrow" />
      </view>
    </view>
    <view class="imgDetail">
      <view class="num">+{{ item.imgNum }}</view>
      <view class="imgBox" v-for="img in item.imgDetail">
        <Image class="imgItem" :src="`${img.hdPath}?x-oss-process=style/thumb`"  :key="img.id"/>
      </view>
    </view>
    <view class="groupTag">
      <view v-for="tag in item.tag.split(',')" class="tagItem" :key="tag">{{ tag }}</view>
    </view>
  </view>
</template>
<script setup>
import arrow from "../../assets/icon/arrow.png";
import {Image, View} from "@tarojs/components";
import Taro from "@tarojs/taro";

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

function goGroup(id) {
  Taro.navigateTo({
    url: `/pages/group/detail/index?id=${id}`
  })
}
</script>
